<template>
  <el-tabs v-if="tabs.length>0"
           v-model="activeName"
           type="card"
           class="demo-tabs"
           closable
           @tab-click="handleClick"
           @tab-remove="cancelTopic"
  >
    <el-tab-pane v-for="tab in tabs" :label="tab.label" :name="tab.label">
      <WebsocketPanel :uuid="tab.uuid" :rows="rows" messageSize="100"/>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import WebsocketPanel from "@/components/WebsocketPanel"

export default {
  name: "Consume",
  data(){
    return {
      tabs:[],
      activeName:"",
      messages:{},
      socket:"",
      rows:10
    }
  },
  components:{
    WebsocketPanel
  },
  created() {
    window.addEventListener('resize', this.getHeight);
    this.getHeight()
    this.tabs=[]
    this.$axios.all(
        [
          this.remoteCall.call(null,"/consume/list","get"),
          this.remoteCall.call(null,"/topic/list","get"),
        ]
    ).then(
        this.$axios.spread((loadConsume,loadTopic)=>{
          let consumes=[]
          let topics=[]
          if(loadConsume.status=200 && loadConsume.data){
            consumes=loadConsume.data
          }

          if(loadTopic.status==200 && loadTopic.data){
            topics=loadTopic.data
          }else{
            this.$message({
              message:"查询消息主题失败!",
              type: "error",
              duration:2000
            })
          }
          consumes.forEach(uuid=>{
            topics.forEach(topic=>{
              if(topic.uuid==uuid){
                topic.label=topic.serverName+"("+topic.groupName+":"+topic.topic+(topic.tag?"_"+topic.tag:"")+")"
                this.tabs.push(topic)
                this.messages[uuid]=""
              }
            })
          })
          if(this.tabs.length>0) {
            this.activeName = this.tabs[this.tabs.length - 1].label
          }else
            this.activeName=null;
        })
    ).catch(error=>{
      this.$message({
        message:"消息订阅信息异常!"+error.toString(),
        type: "error",
        duration:2000
      })
    })
  },
  methods:{
    handleClick(tab){
      console.log(tab)
    },
    cancelTopic(tabname){
      let delindex=-1
      this.tabs.forEach((tab,index)=>{
        if(tab.label==tabname)
          delindex=index
      })
      if(delindex!=-1) {
        this.$axios.post("/consume/stop?uuid=" + this.tabs[delindex].uuid).then(success => {
          if (success.status = 200 && success.data) {
            this.$message({
              message: "取消订阅主题成功!",
              type: "success",
              duration: 2000
            })
            this.tabs.splice(delindex, 1)

          } else {
            this.$message({
              message: "取消订阅主题失败!",
              type: "warning",
              duration: 2000
            })
          }
        }).catch(error => {
              this.$message({
                message: "取消订阅主题失败!" + error.toString(),
                type: "error",
                duration: 2000
              })
            }
        )
      }
    },
    remoteCall(url,type){
      if(type=="post") {
        return this.$axios.post(url)
      }else{
        return this.$axios.get(url)
      }
    },
    getHeight(){
      this.rows=Math.floor((window.innerHeight-65-65)/21)
    }
  }
}
</script>

<style scoped>

</style>